<template>
  <!--区域经理会员-->
  <div>
    <div class="header">
      <div class="employee" @click="toggle">
        <span>{{employee.employeeName}}</span>
        <img src="../../assets/select.png" alt="" width="12">
      </div>
      <ul v-show="isshow" class="employeelist">
        <li v-for="(item,index) in employeeList" @click="check(item)">{{item.employeeName}}</li>
      </ul>
      <div class="search"><input type="text" placeholder="请输入会员名/手机号搜索" v-model="content"><img
        src="../../assets/search.png" alt="" width="16" @click="goSearch()"></div>
    </div>
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <wv-group
        v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <ul class="list">
          <li v-for="(item,index) in accountGoodsList">
            <ul v-if="item.sourceType=='3'|| item.sourceType=='4'">
              <li>{{item.mobile}} <span>{{item.userName}}</span>
                <router-link :to="{path:'wanshanziliao',query:{accountGoodsId: item.accountGoodsId}}"
                             v-if="item.isPrivatedata==2&&item.vipCardState==1">
                  <wv-button type="default" :mini="true" class="lookdetail">完善资料</wv-button>
                </router-link>
                <router-link :to="{path:'shenhe',query:{vipRecordId:item.businessId}}" v-if="item.vipCardState==3">
                  <wv-button type="default" :mini="true" class="daishen">审核</wv-button>
                </router-link>
                <router-link :to="{path:'yuangongdetail',query:{vipRecordId:item.businessId}}"
                             v-if="item.vipCardState==4">
                  <wv-button type="default" :mini="true" class="lookdetail">查看详情</wv-button>
                </router-link>
              </li>

              <li>{{item.goodsName}}
                <span v-if="item.vipCardState==0">待使用</span>
                <span v-if="item.vipCardState==1">有效</span>
                <span class="dongjie" v-if="item.vipCardState==2">已过期</span>
                <span class="weiguo" v-if="item.vipCardState==3">未开通</span>
                <span class="weiguo" v-if="item.vipCardState==4">未通过</span>
                <span class="dongjie" v-if="item.vipCardState==5">冻结</span>
                <span class="dongjie" v-if="item.vipCardState==6">退卡中</span>
                <span class="dongjie" v-if="item.vipCardState==7">已退卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转赠</span>
              </li>
              <li>会员卡号：{{item.vipCardNo}}
                <p>
                  <span v-if="isHaveHekaRemark==1">
                    <wv-button type="default" :mini="true" class="lookdetail"
                               @click="goRemarkHeka(item.accountGoodsId)">
                      合卡
                    </wv-button>
                  </span>
                  <span>
                   <wv-button type="default" :mini="true" class="lookdetail" @click="goRemarkTag(item.accountGoodsId)">打标签</wv-button>
                  </span>
                  <span>
                   <wv-button type="default" :mini="true" class="lookdetail" @click="goLookXieyi(item.accountGoodsId)">查看协议</wv-button>
                  </span>
                  <span>
                   <wv-button v-if="isNeedSetShow==1 && item.isShowData!=1" type="default" :mini="true"
                              class="lookdetail"
                              @click="showSyscAirport(item.accountGoodsId)">同步</wv-button>
                  </span>
                </p>
              </li>
              <li>
                <p>证件号：{{item.identityNo}}</p>
              </li>
              <li>
                <p>
                  <span>开卡时间：{{item.buyDate}}</span><br/>
                  <span>提交时间：{{item.createDate}}</span>
                </p>
                <p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}} <span
                  v-if="item.heKaRemark"> & {{item.heKaRemark}}</span></p>
              </li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">讯联微信</p>
                <p v-if="item.payType=='PAY_WX_YINLIAN'"><img src="../../assets/weixin.png" alt="" width="15">银联微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}</p>
                <p v-if="item.payType==''">支付方式：无</p>
                <span>{{item.payAmount}}元</span>
              </li>
              <li>
                <p>标签：<span v-for="accountgoodsTag in item.accountgoodsTagList" style="margin-left: 8px"> {{accountgoodsTag.tagRemark}}</span>
                </p>
              </li>
            </ul>
            <ul v-else>
              <li>{{item.mobile}} <span>{{item.userName}}</span>
                <router-link :to="{path:'wanshanziliao',query:{accountGoodsId: item.accountGoodsId}}"
                             v-if="item.isPrivatedata==2&&item.vipCardState==1">
                  <wv-button type="default" :mini="true" class="lookdetail">完善资料</wv-button>
                </router-link>
              </li>
              <li>{{item.goodsName}}
                <span v-if="item.vipCardState==0">待使用</span>
                <span v-if="item.vipCardState==1">有效</span>
                <span class="dongjie" v-if="item.vipCardState==2">已过期</span>
                <span class="weiguo" v-if="item.vipCardState==3">未开通</span>
                <span class="weiguo" v-if="item.vipCardState==4">未通过</span>
                <span class="dongjie" v-if="item.vipCardState==5">冻结</span>
                <span class="dongjie" v-if="item.vipCardState==6">退卡中</span>
                <span class="dongjie" v-if="item.vipCardState==7">已退卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转卡</span>
                <span class="dongjie" v-if="item.vipCardState==8">已转赠</span>
              </li>
              <li>会员卡号：{{item.vipCardNo}}
                <p>
                  <span v-if="isHaveHekaRemark==1">
                    <wv-button type="default" :mini="true" class="lookdetail"
                               @click="goRemarkHeka(item.accountGoodsId)">
                      合卡
                    </wv-button>
                  </span>
                  <span>
                   <wv-button type="default" :mini="true" class="lookdetail" @click="goRemarkTag(item.accountGoodsId)">打标签</wv-button>
                  </span>
                  <span>
                   <wv-button type="default" :mini="true" class="lookdetail" @click="goLookXieyi(item.accountGoodsId)">查看协议</wv-button>
                  </span>
                  <span>
                   <wv-button v-if="isNeedSetShow==1 && item.isShowData!=1" type="default" :mini="true"
                              class="lookdetail"
                              @click="showSyscAirport(item.accountGoodsId)">同步</wv-button>
                  </span>
                </p>
              </li>
              <li>
                <p>证件号：{{item.identityNo}}</p>
              </li>
              <li>
                <p>
                  <span>开卡时间：{{item.buyDate}}</span>
                </p>
                <p><img src="../../assets/yuangong.png" alt="" width="15">{{item.employeeName}}<span
                  v-if="item.heKaRemark"> & {{item.heKaRemark}}</span>
                </p>
              </li>
              <li>
                <p v-if="item.payType=='PAY_WX'"><img src="../../assets/weixin.png" alt="" width="15">讯联微信</p>
                <p v-if="item.payType=='PAY_WX_YINLIAN'"><img src="../../assets/weixin.png" alt="" width="15">银联微信</p>
                <p v-if="item.payType=='PAY_UNDERLINE'"><img :src="item.paywayIcon | imgPathFilter" alt="" width="15">{{item.paywayName}}</p>
                <p v-if="item.payType==''">支付方式：无</p>
                <span>{{item.payAmount}}元</span>
              </li>
              <li>
                <p>标签：<span v-for="accountgoodsTag in item.accountgoodsTagList" style="margin-left: 8px"> {{accountgoodsTag.tagRemark}}</span>
                </p>
              </li>
            </ul>
          </li>
        </ul>
      </wv-group>
    </div>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <wv-group class="textarea">
          <wv-textarea placeholder="请填写合卡销售的真实姓名" :rows="3" v-model="remarkHeka"></wv-textarea>
        </wv-group>
        <p class="btn">
          <wv-button type="default" :mini="true" @click="subRemarkHeka()">提交</wv-button>
          <wv-button type="default" :mini="true" @click="isVisible=false">取消</wv-button>
        </p>
      </div>
    </div>
    <div class="model" v-show="isVisibleTag">
      <div class="bg"></div>
      <div class="modelContent">
        <wv-group class="textarea">
          <wv-textarea placeholder="请精简备注说明，备注文字不少于2个字，不多于6个字，只可备注5次" :rows="3" v-model="remarkTag"></wv-textarea>
        </wv-group>
        <p class="btn">
          <wv-button type="default" :mini="true" @click="subRemarkTag()">提交</wv-button>
          <wv-button type="default" :mini="true" @click="isVisibleTag=false">取消</wv-button>
        </p>
      </div>
    </div>
    <div class="model1" v-show="isVisibleSysc">
      <div class="bg1"></div>
      <div class="modelContent1">
        是否确认同步机场？选择确认将会同步给机场查看
        <p class="btn1">
          <button tag="button" @click="subSyscAirport()">确认</button>
          <button @click="isVisibleSysc=false">取消</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  getMyEmployee,
  employeeVip,
  employeeRemarkHeka,
  employeeRemarkTag,
  employeeSyscAirport
} from '../../../test/unit/http'
import {Toast} from 'we-vue'

export default {
  name: '',
  props: {},
  data() {
    return {
      isshow: false,
      employee: {employeeName: '销售'},
      employeeList: [],
      accountGoodsList: [],
      content: '',
      accountGoodsId: '',
      tagAccountGoodsId: '',
      syscAccountGoodsId: '',
      remarkHeka: '',
      remarkTag: '',
      isVisible: false,
      isVisibleTag: false,
      isVisibleSysc: false,
      isHaveHekaRemark: 0,
      isNeedSetShow: 0,
      wrapperHeight: 0,
      page: 1,
      rows: 8,
      loading: false
    };
  },
  methods: {
    toggle() {
      this.isshow = !this.isshow
    },
    check(employee) {
      this.employee = employee;
      this.isshow = !this.isshow;
      this.page = 1;
      this.accountGoodsList = [];
      this.getList();
    },
    getMyEmployeeData() {
      getMyEmployee({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.employeeList = res.object;
        } else {
          Toast.fail(res.info)
        }
      })
    },
    getList() {
      let params = {
        queryEmployeeId: this.employee.employeeId,
        content: this.content,
        page: this.page,
        rows: this.rows
      };
      this.getData(params);
    },
    getData(params) {
      this.loading = true;
      employeeVip(params).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.isHaveHekaRemark = res.object.isHaveHekaRemark;
          this.isNeedSetShow = res.object.isNeedSetShow;
          let data = res.object.pqGrid;
          let list = data.rows;
          let pages = data.pages;
          this.pages = pages;
          let totalNum = data.totalNum;
          this.totalNum = totalNum;
          if (list.length > 0) {
            this.accountGoodsList = this.accountGoodsList.concat(list);
          }
          if (this.page < this.pages) {
            this.page++;
            this.loading = false
          } else {
            this.loading = true
          }
        } else {
          Toast.fail(res.info)
        }
      })
    },
    goSearch() {
      this.page = 1;
      this.accountGoodsList = [];
      this.getList();
    },
    goRemarkHeka(accountGoodsId) {
      this.isVisible = true;
      this.accountGoodsId = accountGoodsId;
      this.remarkHeka = '';
    },
    goRemarkTag(accountGoodsId) {
      this.isVisibleTag = true;
      this.tagAccountGoodsId = accountGoodsId;
      this.remarkTag = '';
    },
    goLookXieyi(accountGoodsId){
      this.$router.push({path: 'huiyuanxieyi', query: {'accountGoodsId': accountGoodsId}})
    },
    subRemarkHeka() {
      let remarkHeka = this.remarkHeka;
      if (this.$myUtils.isNull(remarkHeka)) {
        Toast.fail("合卡备注未填写");
        return;
      }
      let params = {accountGoodsId: this.accountGoodsId, remarkHeka: remarkHeka};
      employeeRemarkHeka(params).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.isVisible = false;
          this.page = 1;
          this.accountGoodsList = [];
          this.getList();
        } else {
          Toast.fail(res.info);
        }
      })
    },
    subRemarkTag() {
      let remarkTag = this.remarkTag;
      if (this.$myUtils.isNull(remarkTag)) {
        Toast.fail("标签备注未填写");
        return;
      }
      if (remarkTag.length < 2 || remarkTag.length > 6) {
        Toast.fail("备注文字不少于2个字，不多于6个字");
        return;
      }
      let params = {accountGoodsId: this.tagAccountGoodsId, remarkTag: remarkTag};
      employeeRemarkTag(params).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.isVisibleTag = false;
          this.page = 1;
          this.accountGoodsList = [];
          this.getList();
        } else {
          Toast.fail(res.info);
        }
      })
    },
    showSyscAirport(accountGoodsId) {
      this.isVisibleSysc = true;
      this.syscAccountGoodsId = accountGoodsId;
    },
    subSyscAirport() {
      if (this.$myUtils.isNull(this.syscAccountGoodsId)) {
        Toast.text("未选择会员卡");
        return;
      }
      let params = {accountGoodsId: this.syscAccountGoodsId};
      employeeSyscAirport(params).then(res => {
        console.log(res);
        if (res.code == 100) {
          this.isVisibleSysc = false;
          this.page = 1;
          this.accountGoodsList = [];
          this.getList();
        } else {
          Toast.fail(res.info);
        }
      })
    }
  },
  created() {
    this.getMyEmployeeData();
  },
  components: {}
}
</script>



<style scoped lang="less" rel="stylesheet/less">
.header {
  display: flex;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
  overflow: visible;
  z-index: 2;

  .employeelist {
    position: absolute;
    width: 88%;
    top: 75px;
    left: 10px;
    right: 10px;
    text-align: left;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .employee, .search input {
    border: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
    border-radius: 7px;
    height: 25px;
    line-height: 25px;
    padding: 10px;
    color: #111;
  }

  .employee {
    flex: 0 100px;
    margin-right: 10px;

    img {
      float: right;
      margin-top: 10px;
    }
  }

  .search {
    position: relative;
    width: calc(100% - 110px);

    input {
      width: 90%;
    }

    img {
      position: absolute;
      right: 20px;
      top: 16px;
    }
  }
}

.list {
  > li {
    margin: 15px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;

    li {
      margin-bottom: 10px;
    }

    li:first-child {
      font-size: 16px;
      color: #111;
      font-weight: 700;

      span {
        color: #999;
        margin-left: 10px;
      }

      button {
        float: right;
      }

      .daishen {
        background-color: #f98e3c;
        color: #fff;
      }

      .lookdetail {
        background-color: #fff;
        border: 1px solid #f98e3c;
        color: #f98e3c;
      }
    }

    li:nth-child(2) {
      line-height: 35px;
      height: 35px;
      color: #111;
      font-size: 17px;
      font-weight: 700;

      span {
        font-size: 15px;
        float: right;
        color: #f98e3c;
      }

      .weiguo {
        color: #2d93f0;
      }

      .no {
        color: #e96673;
      }

      .dongjie {
        color: #999;
      }
    }

    li:nth-child(3) {
      font-size: 12px;
      color: #666;
      display: flex;
      text-align: left;

      p {
        flex: 1;
      }

      p:last-child {
        text-align: right;
      }

      .lookdetail {
        background-color: #fff;
        border: 1px solid #f98e3c;
        color: #f98e3c;
        height: 30px;
      }
    }

    li:nth-child(4) {
      font-size: 12px;
      color: #666;
      display: flex;
      text-align: left;

      p {
        flex: 1;
      }

    }

    li:nth-child(5), li:last-child {
      font-size: 12px;
      color: #666;
      display: flex;
      text-align: left;

      img {
        margin-right: 5px;
      }

      p {
        flex: 1;
      }
    }

    li:nth-child(5) {
      text-align: left;

      img {
        vertical-align: text-bottom;
      }

      p:last-child {
        text-align: right;
      }
    }

    li:nth-child(6) {
      font-size: 12px;
      color: #666;
      display: flex;
      text-align: left;

      p {
        flex: 1;
      }
    }


  }

  > li:last-child {
    border-bottom: none;
  }

}

.bg {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 50px;
}

.model .modelContent {
  background-color: #fff;
  /*border-radius: 8px;*/
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 15px 0;

  .textarea .weui-cell {
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f8f8f8;
    width: 81%;
    margin: auto;
  }

  li:first-child {
    margin-bottom: 10px;
  }

  .btn {
    text-align: right;
    padding: 15px 15px 0;

    button {
      height: 30px;
      line-height: 30px;
      color: #fff;
      width: 75px;
      border-radius: 25px;
    }

    button:last-child {
      background-color: #ccc;
      border: 1px solid #ccc;
      color: #fff;
    }

    button:first-child {
      background-color: #f98e3c;
      margin-right: 20px;

    }
  }
}

.bg1 {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 50px;
}

.model1 .modelContent1 {
  background-color: #fff;
  border-radius: 8px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -43%;
  margin-top: -111px;
  z-index: 2;
  padding: 40px 10px 20px;
  width: 80%;
  text-align: left;

  .btn1 {
    button {
      height: 42px;
      line-height: 42px;
      color: #fff;
      outline: none;
      border: none;
      width: calc(50% - 20px);
      border-radius: 8px;
      margin-top: 25px;
    }

    :last-child {
      background-color: #aaa;

    }

    :first-child {
      background-color: #f98e3c;
      margin-right: 20px;

    }
  }
}
</style>
